<template>
  <a-drawer
    :title="`数据字典值列表，所属类型: ${title}`"
    :visible="visible"
    :destroyOnClose="true"
    width="40vw"
    @close="onClose"
  >
    <div class="table-operator">
      <a-button type="primary" icon="plus" @click="handleAdd" v-action:add>新建</a-button>
    </div>

    <s-table
      ref="table"
      size="default"
      rowKey="id"
      :showPagination="false"
      :columns="columns"
      :data="loadData"
    >
        <span slot="created_at" slot-scope="text">
          <span>{{ text | dayjs }}</span>
        </span>
      <span slot="updated_at" slot-scope="text">
          <span>{{ text | dayjs }}</span>
        </span>

      <span slot="action" slot-scope="text, record">
          <template>
            <a @click="handleEdit(record, 1)" v-action:query>查看</a>
            <a-divider type="vertical" v-action:edit/>
            <a @click="handleEdit(record, 2)" v-action:edit>修改</a>
            <a-divider type="vertical" v-action:delete/>
            <a @click="handleEdit(record, 3)" v-action:delete>删除</a>
          </template>
        </span>
    </s-table>

    <create-value-form
      ref="createModal"
      :visible="valueVisible"
      :loading="confirmLoading"
      :model="mdl"
      @cancel="handleCancel"
      @ok="handleOk"
    />
  </a-drawer>
</template>

<script>
import CreateValueForm from "@/views/platform/dict/modules/CreateValueForm";
import {getList, add, edit, deletes} from "@/api/dictValue";
import { STable, Ellipsis } from '@/components'

const columns = [
  {
    title: '标签',
    dataIndex: 'tag'
  },
  {
    title: '键值',
    align: 'center',
    dataIndex: 'name',
  },
  {
    title: '排序',
    align: 'center',
    dataIndex: 'sort',
  },
  {
    title: '操作',
    align: 'center',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  name: 'ValueDrawer',
  components: {
    CreateValueForm,
    STable,
    Ellipsis
  },
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    title: {
      type: String,
      default: '',
    },
    dictId: {
      type: Number,
      default: 0,
    }
  },
  data () {
    this.columns = columns
    return {
      // create model
      valueVisible: false,
      confirmLoading: false,
      mdl: null,
      // 查询参数
      queryParam: {},
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        const requestParameters = Object.assign({
        }, parameter, this.queryParam)
        return getList(requestParameters, this.dictId)
          .then(res => {
            return {
              result: res.data
            }
          })
      },
      selectedRowKeys: [],
      selectedRows: []
    }
  },
  methods: {
    onClose() {
      this.$emit('close')
    },
    handleAdd() {
      this.mdl = {
        disabled: false
      }
      this.valueVisible = true
    },
    handleCancel() {
      this.valueVisible = false
      const form = this.$refs.createModal
      form.resetFields() // 清理表单数据（可不做）
    },
    handleOk(values) {
      const form = this.$refs.createModal
      this.confirmLoading = true
      if (values.id) {
        edit(values, values.id).then(res => {
          this.valueVisible = false
          this.confirmLoading = false
          // 重置表单数据
          form.resetFields()
          // 刷新表格
          this.$refs.table.refresh()
          this.$message.info('修改成功')
        })
      } else {
        add(values, this.dictId).then(res => {
          this.valueVisible = false
          this.confirmLoading = false
          // 重置表单数据
          form.resetFields()
          // 刷新表格
          this.$refs.table.refresh()
          this.$message.info('新增成功')
        })
      }
    },
    handleEdit(record, index) {
      if (index === 1) {
        this.valueVisible = true
        record.disabled = true;
        this.mdl = { ...record }
      } else if (index === 2) {
        this.valueVisible = true
        record.disabled = false;
        this.mdl = { ...record }
      } else{
        this.confirmLoading = true
        deletes(record.id).then(ret => {
          this.valueVisible = false
          this.confirmLoading = false
          // 刷新表格
          this.$refs.table.refresh()
          this.$message.info('删除成功')
        })
      }
    }
  }
}
</script>

<style lang='less' scoped>

</style>
